import React, { useState, useEffect } from "react";
import { getGoodsClass, delshopclass, changeClassSwitch } from "@/api";
import { Table, Space, Switch, Button, Popconfirm } from "antd";
import style from "./style.module.css";
import Search from "@c/pcSearch";

function GoodsClassificationPage() {
  const [list, setList] = useState([]);
  const [data, setData] = useState([]);

  const columns = [
    {
      title: "名称",
      dataIndex: "name",
    },
    {
      title: "类型",
      dataIndex: "type",
    },
    {
      title: "分类图标",
      render: (record) =>
        record.img ? (
          <Space size="middle">
            <img src={record.img} style={{ width: 37, height: 37 }} alt="" />
          </Space>
        ) : (
          "无"
        ),
    },
    {
      title: "状态",
      render: (record) =>
        record.state.length ? (
          <Space size="middle">
            <Switch
              checkedChildren="显示"
              unCheckedChildren="隐藏"
              checked={record.state === "1" ? true : false}
              onChange={(e) => changeSwich(e, record)}
            />
          </Space>
        ) : (
          "无"
        ),
    },
    {
      title: "操作",
      key: "action",
      render: (record) => (
        <Space size="middle">
          <Popconfirm
            title="确定删除此项?"
            onCancel={() => console.log("用户取消删除")}
            onConfirm={() => {
              console.log("用户确认删除");
              // 此处可以调用删除的api接口
              delshopclass({ id: record.id }).then((res) => {
                getList();
              });
            }}
          >
            <a>删除</a>
          </Popconfirm>
          <Button type="link">添加子目录</Button>
          <Button type="link">编辑</Button>
        </Space>
      ),
    },
  ];
  const SearchForm = {
    select: {
      title: "状态:",
      data: [
        {
          value: "显示",
          label: "显示",
        },
        {
          value: "隐藏",
          label: "隐藏",
        },
      ],
    },
    selectStatus: [], //单层选择
    search: {
      title: "商品搜索：",
      placeholder: "请输入商品名称、关键字",
    },
  };

  useEffect(() => {
    getList();
  }, []);

  // 获取数据
  const getList = (value, selectValue) => {
    getGoodsClass({ input: value, select: selectValue }).then((res) => {
      console.log(res);

      setList(res.data.data);
      getNewList(res.data.data);
    });
  };
  // 操作数据
  const getNewList = (list) => {
    let newArr = [];
    // 把所有一级数据拿到
    newArr = list.filter((item) => item.level === "1");

    // 遍历一级数据把二级数据拿到
    newArr = newArr.map((item) => {
      return {
        ...item,
        children: list.filter((val) => val.parentCode === item.code),
      };
    });

    // 遍历二级数据把三级数据拿到
    newArr = newArr.map((item) => {
      return {
        ...item,
        children: item.children.map((val) => {
          return {
            ...val,
            children: list.filter((v) => v.parentCode === val.code),
          };
        }),
      };
    });
    console.log(newArr);

    setData([...newArr]);
  };

  // 模糊搜索
  const handleSearch = (value) => {
    getList(value);
  };

  // 下拉
  const selectStatus = (selectValue) => {
    console.log(selectValue);

    getList(selectValue);
  };

  // 改变显示隐藏
  const changeSwich = (e, record) => {
    // console.log(e, record);
    // changeClassSwitch(record).then(res => {
    //   console.log(res)
    // })
  };
  return (
    <div className={style.shopClass}>
      <div className={style.search}>
        <Search
          SearchForm={SearchForm}
          selectStatus={selectStatus}
          handleSearch={handleSearch}
        />
      </div>
      <Table columns={columns} rowKey="id" dataSource={data} />
    </div>
  );
}

export default GoodsClassificationPage;
